<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/header_footer.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/imports.css">
 <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/about.css">

</head>
<body>
<header class="header">
    <div class="container">
        <p class="left">24/7 Support &nbsp; :010-25418796 </p>
        <select class="right">
            <option value="English">English</option>
            <option value="China">China</option>
        </select>
        <div class="clearfix"></div>
    </div>
</header>
<nav class="navbar-list">
    <div class="container">
        <div class="left nav_img">
            <img src="images/logo.png" alt="" width="100%" class="img">
        </div>

        <button class="btn right btn-default glyphicon glyphicon-list" id="menu"></button>
        <ul class="right nav_block_a" >
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html" class="active">About</a></li>
            <li><a href="Gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>

    <div class="clear"></div>
</nav>
<article class="nav-name">About</article>

<section class="about-info">
    <div class="container">
       <h1>Cum sociis natoque penatibus et magnis dis parturient montes , nascetur ridiculus mus</h1>
       <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et dignissim augue, et sagittis turpis. Vestibulum congue turpis ac tincidunt accumsan. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orc i ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci.</p>
       <div class="row">
           <div class="col-md-4 col-xs-12 col-sm-12 about-info-body">
               <a href="#"><img src="images/abt-1.jpg" alt="" width="100%"></a>
               <h4>Our Standards</h4>
               <p>Suspendisse commodo tempor sagittis! In justo est, sollicitudin eu scelerisque pretium, placerat eget elit. Vestibulum congue turpis ac tincidunt accumsan.</p>
           </div>
           <div class="col-md-4 col-xs-12 col-sm-12 about-info-body">
               <a href="#"><img src="images/abt-2.jpg" alt="" width="100%"></a>
               <h4>What We Do</h4>
               <p>Suspendisse commodo tempor sagittis! In justo est, sollicitudin eu scelerisque pretium, placerat eget elit. Vestibulum congue turpis ac tincidunt accumsan.</p>
           </div>
           <div class="col-md-4 col-xs-12 col-sm-12 about-info-body">
               <a href="#"><img src="images/abt-3.jpg" alt="" width="100%"></a>
               <h4>Our Capabilities</h4>
               <p>Suspendisse commodo tempor sagittis! In justo est, sollicitudin eu scelerisque pretium, placerat eget elit. Vestibulum congue turpis ac tincidunt accumsan.</p>
           </div>
       </div>
    </div>
    <div class="clear"></div>
</section>
<section class="player">
     <div class="container">
         <div class="col-md-6 col-sm-12 col-xs-12 player-body">
             <h1 class="">Player Restrictions</h1>
             <div class="row">
                 <div class="col-sm-1 col-md-1 col-xs-2">
                     <div class="circle">1</div>
                 </div>
                 <div class="col-sm-11 col-md-11 col-xs-10 section2_div_right">
                     <h5>Elacus a porta varius dui</h5>
                     <p>In neque arcu, vulputate vitae dignissim id, placerat adipiscing lorem. Nulla consectetur adipiscing metus vel pulvinar. Aenean molestie mauris non diam tincidunt faucibus.</p>
                 </div>
             </div>

             <div class="row">
                 <div class="col-sm-1 col-md-1 col-xs-2">
                     <div class="circle">2</div>
                 </div>
                 <div class="col-sm-11 col-md-11 col-xs-10 section2_div_right">
                     <div class="section2_div_right">
                         <h5>Elacus a porta varius dui</h5>
                         <p>In neque arcu, vulputate vitae dignissim id, placerat adipiscing lorem. Nulla consectetur adipiscing metus vel pulvinar. Aenean molestie mauris non diam tincidunt faucibus.</p>
                     </div>
               </div>
             </div>

             <div class="row">
                 <div class="col-sm-1 col-md-1 col-xs-2">
                     <div class="circle">3</div>
                 </div>
                 <div class="col-sm-11 col-md-11 col-xs-12 section2_div_right">
                     <div class="section2_div_right">
                         <h5>Elacus a porta varius dui</h5>
                         <p>In neque arcu, vulputate vitae dignissim id, placerat adipiscing lorem. Nulla consectetur adipiscing metus vel pulvinar. Aenean molestie mauris non diam tincidunt faucibus.</p>
                     </div>
                 </div>
             </div>

         </div>
         <div class="col-md-6 col-sm-12 col-xs-12 player-body">
             <h1 class="">Player Skills</h1>
             <h5>Erci eu tincidunt lacinia, elit quam ultri ces ipsum, quis ultricies ipsum ante</h5>
             <p class="grey_p">Donec sagittis interdum tellus sed bibendum. Aen ean fringilla ut lacus eu vehicula. Curabitur non nibh quis nisi vestibulum aliquet non sed dolor. Ut est risus, consectetur sit amet pretium in, cursus in dui. Donec ac rhoncus libero.</p>
             <div class="bgimg_p">
                 <p>Praesent vestibulum molestie lacus </p>
                 <p>Donec sagittis interdum tellus </p>
                 <p>Nulla consectetur adipiscing </p>
                 <p>Donec ac rhoncus libero. </p>
                 <p>Erci eu tincidunt lacinia </p>
             </div>
         </div>
         <div class="clear"></div>
     </div>
</section>
<section class="term-images">
    <div class="container">
        <h1 class="">OUR TEAM</h1>
        <div class="img_circle row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="img_circle_div_out img_circle_bg1">
                    <div class="gold_bg">
                        <h3>Stay Foxy</h3>
                        <p>by Arnel BaluyotView on Dribbble</p>
                    </div>
                    <a class="img_circle_bg1"></a>
                    <div class="white_bg"></div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="img_circle_div_out img_circle_bg2">
                    <div class="gold_bg">
                        <h3>Stay Foxy</h3>
                        <p>by Arnel BaluyotView on Dribbble</p>
                    </div>
                    <a class="img_circle_bg2"></a>
                    <div class="white_bg"></div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="img_circle_div_out img_circle_bg3">
                    <div class="gold_bg">
                        <h3>Stay Foxy</h3>
                        <p>by Arnel BaluyotView on Dribbble</p>
                    </div>
                    <a class="img_circle_bg3"></a>
                    <div class="white_bg"></div>
                </div>
            </div>

        </div>
    </div>
    <div class="clear"></div>
</section>
<footer class="footer">
    <div class="container">
        <a href="index.html" class="footer-logo"><img src="images/footer_logo.png" alt="" width="100%"></a>
        <div class="row">
            <div class=" col-lg-6 col-md-6 col-sm-12">
                <p class="p_footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <ul class="">
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Typography</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Mail</a></li>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</footer>
</body>
</html>